<template>
	<view class="page">
		<view class="container">
			<!-- 菜单 -->
			<view class="menu">
				<button type="default" :class="choice == 1 ? 'btn-selected' : 'btn'" @click="click1">高一</button>
				<button type="default" :class="choice == 2 ? 'btn-selected' : 'btn'" @click="click2">高二</button>
				<button type="default" :class="choice == 3 ? 'btn-selected' : 'btn'" @click="click3">高三</button>
			</view>

			<!-- 高一班级列表 -->
			<view class="content" v-if="choice==1">
				<view class="title">
					<view class="title-txt">班级</view>
					<view class="title-txt">班主任</view>
					<view class="title-txt">人数</view>
				</view>

				<view class="line"></view>
	
				<view class="content-list">
					<view class="item-wrapper" v-for="(clazz,index) in clazzList1">
						<view class="item" @click="click(clazz)">
							<view class="item-txt">{{clazz.name}}</view>
							<view class="item-txt">{{clazz.director}}</view>
							<view class="item-txt">{{clazz.counter}}人</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 高二班级列表 -->
			<view class="content" v-if="choice==2">
				<view class="title">
					<view class="title-txt">班级</view>
					<view class="title-txt">班主任</view>
					<view class="title-txt">人数</view>
				</view>
			
				<view class="line"></view>
			
				<view class="content-list">
			
					<view class="item-wrapper" v-for="(clazz,index) in clazzList2">
						<view class="item" @click="click(clazz)">
							<view class="item-txt">{{clazz.name}}</view>
							<view class="item-txt">{{clazz.director}}</view>
							<view class="item-txt">{{clazz.counter}}人</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 高三班级列表 -->
			<view class="content" v-if="choice==3">
				<view class="title">
					<view class="title-txt">班级</view>
					<view class="title-txt">班主任</view>
					<view class="title-txt">人数</view>
				</view>
			
				<view class="line"></view>
			
				<view class="content-list">
			
					<view class="item-wrapper" v-for="(clazz,index) in clazzList3">
						<view class="item" @click="click(clazz)">
							<view class="item-txt">{{clazz.name}}</view>
							<view class="item-txt">{{clazz.director}}</view>
							<view class="item-txt">{{clazz.counter}}人</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				choice: 1,

				clazzList1: [{
						name: '1班',
						director: '李老师',
						counter: '52',
						fullname: '高一(01)'
					},
					{
						name: '2班',
						director: '王老师',
						counter: '49',
						fullname: '高一(02)'
					},
					{
						name: '3班',
						director: '朱老师',
						counter: '50',
						fullname: '高一(03)'
					}
				],
				clazzList2: [{
						name: '1班',
						director: '李老师',
						counter: '52',
						fullname: '高二(01)'
					},
					{
						name: '2班',
						director: '王老师',
						counter: '49',
						fullname: '高二(02)'
					},
					{
						name: '3班',
						director: '朱老师',
						counter: '50',
						fullname: '高二(03)'
					},
					{
						name: '4班',
						director: '刘老师',
						counter: '52',
						fullname: '高二(04)'
					}
				],
				clazzList3: [{
						name: '1班',
						director: '李老师',
						counter: '52',
						fullname: '高三(01)'
					},
					{
						name: '2班',
						director: '王老师',
						counter: '49',
						fullname: '高三(02)'
					},
					{
						name: '3班',
						director: '朱老师',
						counter: '50',
						fullname: '高三(03)'
					},
					{
						name: '4班',
						director: '蒋老师',
						counter: '50',
						fullname: '高三(04)'
					},
					{
						name: '5班',
						director: '马老师',
						counter: '50',
						fullname: '高三(05)'
					}
				],
			}
		},
		methods: {
			click1() {
				this.choice = 1;
			},
			click2() {
				this.choice = 2;
			},
			click3() {
				this.choice = 3;
			},
			
			click(clazz) {
				// console.log(clazz.fullname);
				const pages = getCurrentPages();
				const prevPage = pages[pages.length - 2];
				prevPage.$vm.grade = clazz.fullname;
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: centser;
		align-items: center;

	}

	.menu {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		/* border: solid 1px red; */
		width: 480upx;
		margin-top: 50upx;
	}

	.btn {
		font-size: 20upx;
		width: 160upx;
		background-color: #F8F8F8;
		color: black;
	}

	.btn-selected {
		font-size: 20upx;
		width: 160upx;
		background-color: #00AA00;
		color: white;
	}

	.line {
		height: 1px;
		background-color: rgba(0, 0, 0, 0.2);
		margin-left: 50upx;
		margin-right: 50upx;
		width: 80%;
	}

	.content {
		/* height: 500upx; */
		margin-left: 20upx;
		margin-right: 20upx;
		margin-top: 30upx;
		width: 90%;
		/* border: solid 1px red; */
		/* background-color: #C8C7CC; */
		/* background-color: white; */

		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;

	}

	.title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 80%;
		/* border: solid 1px green; */
		height: 100upx;
	}

	.title-txt {
		font-weight: bold;
	}

	.content-list {
		display: flex;
		flex-direction: column;
		width: 80%;
		/* border: solid 1px green; */

	}

	.item {
		display: flex;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100upx;
	}
</style>
